import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setVisibility } from '../../actions/todoList'
import './index.css'

const stateMap = (state) => ({
        setVisibility: state.setVisibility,
    })




class Filter extends Component {
    onClick = () => {
        this.props.dispatch(setVisibility({filter: this.props.filter}))
    }

    render() {
        const { name, filter, setVisibility } = this.props
        const active = setVisibility.filter === filter
        return (
            <div className="todo-tab_item">
                <a style={{color: active ? '#f01414' : '#4d555d'}} onClick={this.onClick}>{name}</a>
            </div>
        )
    }
}

export default connect(stateMap)(Filter)


